<script lang="ts" setup>
import type {FormSchema} from '#/ui-kit/form-ui';
import {z} from '#/ui-kit/form-ui'
import {computed, markRaw} from 'vue';

import {AuthenticationLogin, SliderCaptcha} from '#/components/common-ui';
import {$t} from '#/locales';

import {useAuthStore} from '#/stores';

defineOptions({name: 'Login'});

const authStore = useAuthStore();

const formSchema = computed((): FormSchema[] => {
  return [
    {
      component: 'BasicInput',
      componentProps: {
        placeholder: $t('authentication.usernameTip'),
      },
      fieldName: 'username',
      label: $t('authentication.username'),
      rules: z.string().min(1, {message: $t('authentication.usernameTip')}),
    },
    {
      component: 'BasicInputPassword',
      componentProps: {
        placeholder: $t('authentication.password'),
      },
      fieldName: 'password',
      label: $t('authentication.password'),
      rules: z.string().min(1, {message: $t('authentication.passwordTip')}),
    },
    {
      component: markRaw(SliderCaptcha),
      fieldName: 'captcha',
      rules: z.boolean().refine((value) => value, {
        message: $t('authentication.verifyRequiredTip'),
      }),
    },
  ];
});
</script>

<template>
  <AuthenticationLogin
      :form-schema="formSchema"
      :loading="authStore.loginLoading"
      @submit="authStore.authLogin"
      :show-third-party-login="true"
      :show-qrcode-login="false"
      :show-code-login="false"
      :show-register="false"
      :show-forget-password="false"
  />
</template>
